<template>
  <div class="OutOfReportForm">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">查询快递</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <!--<el-form-item label="开始时间" prop="cjsj">-->
        <!--<el-date-picker-->
        <!--@change="getTime"-->
        <!--v-model="time"-->
        <!--type="date"-->
        <!--placeholder="开始时间">-->
        <!--</el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="结束时间" prop="cjsj">-->
        <!--<el-date-picker-->
        <!--@change="getTimes"-->
        <!--v-model="times"-->
        <!--type="date"-->
        <!--placeholder="结束时间">-->
        <!--</el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="" >-->
          <!--<el-input type="text"-->
          <!--@change="query"-->
          <!--v-model="Name"-->
          <!--class="input"-->
          <!--placeholder="订单渠道名称" spellcheck="false" auto-capitalize="off" auto-complete="off"-->
          <!--auto-correct="off">-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableExport('')">多选导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="承运商" prop="cys">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_cys"
                    placeholder="承运商" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="运单号" prop="ysdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_ysdh"
                    placeholder="运单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="fybh">
        <el-input type="text"
                  class="input"
                  v-model="autoVue_table_fybh"
                  placeholder="订单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                  auto-correct="off"></el-input>
      </el-form-item>
        <el-form-item label="收货方式" prop="jhfs">
          <el-select v-model="autoVue_table_jhfs"
                     placeholder="收货方式">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in CXKD.jhfs"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运方式" prop="cyslb">
          <el-select v-model="autoVue_table_cyslb"
                     placeholder="承运方式">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in CXKD.cyslb"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货地址" prop="dz">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dz"
                    placeholder="收货地址" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="用途" prop="yt">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_yt"
                    placeholder="用途" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
  </div>
</template>
<script>
  import {AutoVue} from '~/plugins/Tools';
  import Config from '~/config';
  export default AutoVue({
    name: 'outOperation_c2q1heck-FEcarWms',
    head: {
      'title': '查询快递',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 出库明细报表 查看出库明细报表信息'},
      ],
    },
    store: ['USER', 'CXKD', 'DICTIONARY_cxkd'],
    data: {
      header: {
        'Content-Disposition': 'attachment',
      },
      table: {
        column: [
          { label: '承运方式',
            prop: 'show_cyslb',
            minWidth: '0px',
            search: true },
          {
            label: '承运商',
            prop: 'cys',
            minWidth: '150px',
            search: true,
          },
          {
            label: '运单号',
            prop: 'ysdh',
            minWidth: '150px',
            search: true,
          },
          {
            label: '订单号',
            prop: 'fybh',
            minWidth: '200px',
            search: true,
          },
          {
            label: '发货日期',
            prop: 'fysj',
            minWidth: '170px',
            search: false,
          },
          {
            label: '支付日期',
            prop: 'zfrq',
            minWidth: '170px',
            search: false,
          },
          {
            label: '一级',
            prop: 'yiji',
            minWidth: '0px',
            search: false,
          },
          {
            label: '二级',
            prop: 'erji',
            minWidth: '0px',
            search: false,
          },
          {
            label: '三级',
            prop: 'sanji',
            minWidth: '0px',
            search: false,
          },
          {
            label: '用途',
            prop: 'yt',
            minWidth: '0px',
            search: true,
          },
          {
            label: '发起人',
            prop: 'ddfqr',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发起部门',
            prop: 'fqbm',
            minWidth: '0px',
            search: false,
          },
          {
            label: '收货人姓名',
            prop: 'shrxm',
            minWidth: '0px',
            search: false,
          },
          {
            label: '国家',
            prop: 'gj',
            minWidth: '0px',
            search: false,
          },
          {
            label: '省份',
            prop: 'sheng',
            minWidth: '0px',
            search: false,
          },
          {
            label: '城市',
            prop: 'shi',
            minWidth: '0px',
            search: false,
          },
          {
            label: '县区',
            prop: 'xq',
            minWidth: '0px',
            search: false,
          },
          {
            label: '收货地址',
            prop: 'dz',
            minWidth: '200px',
            search: true,
          },
          {
            label: '收货方式',
            prop: 'show_jhfs',
            minWidth: '0px',
            search: true,
          },
          {
            label: '电话',
            prop: 'lxrdh',
            minWidth: '150px',
            search: false,
          },
          {
            label: '产品汇总',
            prop: 'cphz',
            minWidth: '150px',
            search: false,
          },
          {
            label: '发运箱数',
            prop: 'ysxs',
            minWidth: '0px',
            search: false,
          },
          {
            label: '理论重量',
            prop: 'llzl',
            minWidth: '150px',
            search: false,
          },
          {
            label: '实际重量',
            prop: 'sjzl',
            minWidth: '0px',
            search: false,
          },
          {
            label: '运费',
            prop: 'yf',
            minWidth: '0px',
            search: false,
          },
          {
            label: '运费承担方',
            prop: 'yfcdf',
            minWidth: '0px',
            search: false,
          },
          {
            label: '对外物流报价',
            prop: 'dwbj',
            minWidth: '0px',
            search: false,
          },
          {
            label: '备注',
            prop: 'bz',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [ /* {
          hpbh: '20160502',
          hpmc: '王小虎',
          sl: '1518 弄',
          xbh: '1',
        } */ ],
        key: 'id',
        tableColumn: 28,
        url: '/statistics/seachWlkd',
        option: {
          page: 1,
          rows: 10,
        },
        total: 0,
      },
    },
    transition: 'slide-fade',
    methods: {
      tableExport (row) {
        let tableRef = 'table';
        let ids = [];
        if (row) {
          ids.push(row.ysdh);
        } else {
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.ysdh);
          });
        }
        this.$confirm('您将导出查询快递报表数据。', '确认导出？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              let option = Object.assign({}, this['autoVue_' + tableRef]);
              await this.p({
                url: '/statistics/seachWlkdExport',
                method: 'post',
                responseType: 'blob',
                data: {
                  ids,
                  ...option,
                },
              });
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      if (!this.DICTIONARY_kuwei) {
        await this.USE('DICTIONARY_cxkd');
      }
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }
  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }
  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
  .headertype {
    color:#1bab8b;
  }
</style>

<style lang="scss">
</style>
